<template>
    <div class="contion">
        <h2 style="text-align:center;">首页</h2>
        <div class="contion_1">
            <header class="header">
            <el-tabs v-model="activeTopTab" @tab-click="handleTopTabClick" class="tabs">
                <el-tab-pane label="关注" name="1"></el-tab-pane>
                <el-tab-pane label="发现" name="2"></el-tab-pane>
                <el-tab-pane label="北京" name="3"></el-tab-pane>
            </el-tabs>
            <el-icon :size="20" style="margin-left:20px;margin-top:10px"><Odometer /></el-icon>
            <el-icon @click="search" :size="20" style="margin-right:20px"><Search /></el-icon>
            </header>
         
            
            <div v-if="activeTopTab === '2'" class="sub-header">
            <el-tabs v-model="activeSubTab" @tab-click="handleSubTabClick">
                <el-tab-pane
                v-for="(a,b) in subtabslist"
                :key="b"
                :label="a.name"
                :name="a.id.toString()"
                ></el-tab-pane>
            </el-tabs>
            </div>
        
            <main class="main">
            <div v-if="activeTopTab === '1'" class="content">
                <h3>关注内容</h3>
                <p>这里是关注的内容...</p>
            </div>
        
            <div v-if="activeTopTab === '2'" class="content_">
                <div v-if="activeSubTab === '1'" class="img">
                    <div  v-for="(j,k) in homelist.comment" :key="k">
                        <div class="homepage_1">
                            <img :src="j.image" style="width:180px; height:300px;">
                            <span>{{ j.title }}</span>
                        </div>
                        <div style="display: flex;flex-direction: row;">
                            <img :src="j.publish_img"/>
                            <div class="homepage_2">{{ j.publish }}</div>
                            <van-icon name="like-o" />
                            <span>{{ j.like }}</span>
                        </div>
                    </div>
                </div>
                <div v-else-if="activeSubTab === '2'" class="img">
                    <div  v-for="(j,k) in homelists" :key="k">
                            <div class="homepage_1">
                                <img :src="j.home.image" style="width:190px; height:300px;">
                                <span>{{ j.home.title }}</span>
                            </div>
                            <div style="display: flex;flex-direction: row;">
                                <img :src="j.home.publish_img"/>
                                <div class="homepage_2">{{ j.home.publish }}</div>
                                <van-icon name="like-o" />
                                <span>{{ j.home.like }}</span>
                            </div>
                    </div>
                </div>
                <div v-else-if="activeSubTab === '3'">
                    <h3>直播内容</h3>
                    <p>这里是直播的内容...</p>
                </div>
                <div v-else-if="activeSubTab === '4'">
                    <h3>美甲内容</h3>
                    <p>这里是美甲的内容...</p>
                </div>
                <div v-else-if="activeSubTab === '5'">
                    <h3>穿搭内容</h3>
                    <p>这里是穿搭的内容...</p>
                </div>
                <div v-else-if="activeSubTab === '6'">
                    <h3>美食内容</h3>
                    <p>这里是美食的内容...</p>
                </div>
                <div v-else-if="activeSubTab === '7'">
                    <h3>绘画内容</h3>
                    <p>这里是绘画的内容...</p>
                </div>
            </div>
        
            <div v-if="activeTopTab === '3'" class="content">
                <h3>北京内容</h3>
                <p>这里是北京的内容...</p>
            </div>
        
            <div v-if="activeDropdownCommand" class="content">
                <h3>{{ activeDropdownCommand }} 内容</h3>
                <p>这里是 {{ activeDropdownCommand }} 的内容...</p>
            </div>
            </main>
        </div>
        <div class="home">
            <span style="font-size:20px;color:#000;margin-left:20px;margin-right:20px"><b>首页</b></span>
            <span style="margin-left:40px;margin-right:20px" @click="goods">购物</span>
            <el-button><el-icon :size="30" @click="add"><Plus color="#fff"/></el-icon></el-button>
            <span style="margin-left:40px;margin-right:20px" @click="message">消息</span>
            <span style="margin-left:40px;margin-right:20px" @click="my">我</span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();

const search = () => {
    router.push('/search')
}

const goods = () => {
    router.push('/goods')
}

const add = () => {
    router.push('/add')
}

const message = () => {
    router.push('/message')
}
const my = () => {
    router.push('/my')
}


// 从本地存储中获取 token
// const token = ref(localStorage.getItem('token') || '');

// 顶部导航栏的激活选项卡
const activeTopTab = ref('2'); // 默认显示“关注”内容

// 发现选项卡下的子导航栏的激活选项卡
const activeSubTab = ref('2'); // 默认显示“视频”内容

let activeDropdownCommand = ref('');

// 子选项卡配置
let subtabslist = ref([])
const subTabs = () =>{
http.get(`http://127.0.0.1:8000/cate/`).then(res=>{
    subtabslist.value = res.data
})
}

let homelist = ref([])
const user = localStorage.getItem('userid')
const gethome = () => {
    http.get(`http://127.0.0.1:8000/comment/?userid=${user}`).then(res=>{
        homelist.value = res.data
    })
}
const handleTopTabClick = (tab) => {
    // console.log('顶部选项卡切换:', tab.props.name);
    activeDropdownCommand.value = ''; // 清空下拉菜单选中状态
};

// 处理发现选项卡下的子导航栏的点击事件
const handleSubTabClick = (tab) => {
    // console.log('子选项卡切换:', tab.props.name);
    activeDropdownCommand.value = ''; // 清空下拉菜单选中状态
};

let homelists = ref([])
const gethomes = () => {
    http.get(`http://127.0.0.1:8000/history/?userid=${user}`).then(res=>{
        // console.log(res.data.data)
        homelists.value = res.data.data
    })
}

onMounted(() => {
    subTabs()
    gethome()
    gethomes()
});


</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.header {
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-header {
    background-color: #f8f8f8;
    padding: 10px;
    border-bottom: 1px solid #e7e7e7;
}

.main {
    padding: 20px;
    padding-top: 20px;
}

.content {
    margin-top: 0px;
}

.content h3 {
    font-size: 18px;
    color: #333;
}

.content p {
    font-size: 14px;
    color: #666;
}

.dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.dropdown-trigger .el-icon {
    font-size: 16px;
    color: #333;
}

.tabs{
    align-items: center;
    justify-content: center;
    color: #000;
    position: fixed;
    z-index: 100; /* 确保标签栏在内容之上 */
    margin-left: 140px;
    margin-top: 10px;
}

.img{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr); /* 根据需要调整列数 */
    display: grid;
    gap: 10px;
    height: 700px; /* 设置固定高度 */
    overflow-y: auto; /* 允许垂直滚动 */
    padding-top: 10px;
    border-top: 1px darkgray solid;
}

.homepage_1{
    display: flex;
    flex-direction: column;
}

.homepage_2{
    width: 90px;
    font-size:13px;
    margin-right: 10px;
}


.home{
    width: 100%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    height: 50px;
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    padding-top: 20px;
    font-size: 18px;
    color: darkgray;
    background-color: #fff;
}

.home button{
    background-color: #FF2442;
    border-radius: 10px;
    width: 60px;
    height: 40px;
    margin-left:20px;
    border: #FF2442 1px solid;
}
</style>

